<template>
    <div class="main forecast">
        <div class="select-box">
            <div class="clearfix">
                <div class="select" id="kucundalei">
                    <div class="th">库存大类</div>
                    <div class="td">
                    	<div class="ipt-clear">ｘ</div>
                        <input type="text" data="" name="kucundalei" value="" />
                        <ul class=""></ul>
                    </div>
                </div>
                <div class="select cur" id="kucunxiaolei">
                    <div class="th">库存小类</div>
                    <div class="td">
                    	<div class="ipt-clear">ｘ</div>
                        <input type="text" data="" name="kucunxiaolei" value="" />
                        <ul></ul>
                    </div>
                </div>
                <div class="select" id="wuliaobianhao">
                    <div class="th">物料编号</div>
                    <div class="td">
                    	<div class="ipt-clear">ｘ</div>
                        <input type="text" data="" name="wuliaobianhao" value="" />
                        <ul></ul>
                    </div>
                </div>
                <div class="select">
                    <div class="th">计划类别</div>
                    <div class="td">
                    	<div class="ipt-clear">ｘ</div>
                        <input type="text" data="" name="jihualeibie" value="" readonly="readonly" />
                        <ul></ul>
                    </div>
                </div>
                <div class="select">
                    <div class="th">智能分类</div>
                    <div class="td">
                    	<div class="ipt-clear">ｘ</div>
                        <input type="text" data="" name="zhinengfenlei" value="" readonly="readonly" />
                        <ul></ul>
                    </div>
                </div>
                <div class="select">
                    <div class="th">采购员</div>
                    <div class="td">
                    	<div class="ipt-clear">ｘ</div>
                        <input type="text" data="" name="caigouyuan" value="" />
                        <ul></ul>
                    </div>
                </div>
                <div class="select">
                    <div class="th">Sourcing</div>
                    <div class="td">
                    	<div class="ipt-clear">ｘ</div>
                        <input type="text" data="" name="sourcing" value="" />
                        <ul></ul>
                    </div>
                </div>
                <div class="select">
                    <div class="th">计划员</div>
                    <div class="td">
                    	<div class="ipt-clear">ｘ</div>
                        <input type="text" data="" name="jihuayuan" value="" />
                        <ul></ul>
                    </div>
                </div>
                <div class="select">
                    <div class="th">决策日期</div>
                    <div class="td">
                    	<div class="ipt-clear">ｘ</div>
                        <input type="text" id="endDate" name="jueceriqi" value="" readonly="readonly" />
                    </div>
                </div>
            </div>
            <div class="clearfix">
                <div class="operation">
                    <div class="query" v-on:click="setPostData();">查询</div>
                    <div class="reset">重置</div>
                </div>
            </div>
        </div>
        <div class="frame">
        	<div class="frame-loadding80" v-if="tableLoadding"></div>
        	<div class="frame-content" v-if="tableShow">
		        <table cellspacing="0" cellpadding="0" class="table">
		            <tr class="tdWidth">
		                <td width="*"></td>
		                <td width="*"></td>
		                <td width="*"></td>
		                <td width="*"></td>
		                <td width="*"></td>
		                <td width="*"></td>
		                <!--<td width="*"></td>-->
		            </tr>
		            <tr class="thead">
		                <td>物料</td>
		                <td>描述</td>
		                <td>智能分类</td>
		                <td>库存大类</td>
		                <td>库存小类</td>
		                <td>计划类别</td>
<!--		                <td>是否VMI</td>-->
		            </tr>
		            <tr class="cursor" v-for="(tr,index) in tableList.items" v-bind:class="{'trClickActive':tableTrClick==(index+1)}" v-on:click="basisMap1_TR(index+1,tr.ITEM,tr.SEGMENT1)">
		                <td><span class="click_link">{{tr.SEGMENT1}}</span></td>
		                <td>{{tr.DESCRIPTION}}</td>
		                <td>{{tr.CATEGORY}}</td>
		                <td>{{tr.ITEM_BIG_CLASS}}</td>
		                <td>{{tr.ITEM_SMALL_CLASS}}</td>
		                <td>{{tr.PLAN_CLASS}}</td>
		                <!--<td>{{tr.VMI}}</td>-->
		            </tr>
		        </table>
		        <div class="table-tr" v-if="tableList.pages>1">
		            <div class="pageturn">
		                                共
		                <em>{{tableList.total}}</em>
		                                条，第
		                <em>{{tableList.page}}</em>
		                /
		                <em>{{tableList.pages}}</em>
		                                页，跳转到第
		                <input type="text" class="pageturn-ipt" v-model="iptPage" value="" />
		                                页
		                <span class="page-turn" v-on:click="basisMap0(iptPage,tableList.page)">跳转</span>
		                <span class="page-first" v-on:click="basisMap0(1,tableList.page)">首页</span>
		                <span class="page-up" v-on:click="basisMap0(tableList.page-1>0?tableList.page-1:1,tableList.page)">上一页</span>
		                <span class="page-down" v-on:click="basisMap0(tableList.page+1,tableList.page)">下一页</span>
		                <span class="page-last" v-on:click="basisMap0(tableList.pages,tableList.page)">末页</span>
		            </div>
		        </div>
		    </div>
        	<div class="frame-noData" v-if="noData0">暂无数据...</div>
        </div>
        <div class="title hide">决策依据</div>
        <div class="frame hide">
        	<div class="frame-loadding80" v-if="tableLoadding1"></div>
        	<div class="frame-content pr" v-show="tableShow1">
        		<div class="mapTops pr basis"><div class="mapTitle pa">物料：所有物料</div></div>
        		<!--<div style="width:1px;height:4rem;border-left:1px dashed #666666;position:absolute;left:50%;margin-left:-2.38rem;top:2.1rem;"></div>-->
        		<div id="basisMap0">echarts图形预留</div>
		        <div class="tscroll br">
		            <ul class="list">
		                <li class="head">项目</li>
		                <li>实际到货量</li>
		                <li>实际需求量</li>
		                <li>销售订单需求量</li>
		                <li>预测需求量</li>
		                <li>安全库存量</li>
		                <li>未结订单预计到货</li>
		                <li>建议订单预计到货</li>
		                <li>日初库存量</li>
		                <li>库存价值</li>
		                <li>30天年化周转率</li>
		                <li>本年周转率</li>
		                <li>需求满足率</li>
		                <li>超期OPO未接收数量</li>
		            </ul>
		            <div class="scroll-box">
			            <div ref="kk" class="tableBox bl clearfix">
			            	<ul class="ul-table">
			            		<li class="li-title">7月第1周(第29周)</li>
			            		<li class="clearfix">
			            			<div class="td">2017/7/1</div>
			            			<div class="td">2017/7/1</div>
			            			<div class="td">2017/7/1</div>
			            			<div class="td">2017/7/1</div>
			            			<div class="td">2017/7/1</div>
			            			<div class="td">2017/7/1</div>
			            			<div class="td">2017/7/1</div>
			            		</li>
			            		<li class="clearfix">
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            		</li>
			            		<li class="clearfix">
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            		</li>
			            		<li class="clearfix">
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            		</li>
			            		<li class="clearfix">
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            		</li>
			            		<li class="clearfix">
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            		</li>
			            		<li class="clearfix">
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            		</li>
			            		<li class="clearfix">
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            		</li>
			            		<li class="clearfix">
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            		</li>
			            		<li class="clearfix">
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            		</li>
			            		<li class="clearfix">
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            		</li>
			            		<li class="clearfix">
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            		</li>
			            		<li class="clearfix">
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            		</li>
			            		<li class="clearfix">
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            			<div class="td"></div>
			            		</li>
			            	</ul>
			            </div>
		            </div>
		        </div>
		    </div>
        	<div class="frame-noData" v-if="noData1">暂无数据...</div>
        </div>
    </div>
</template>

<script>
	import calender from '../common/js/calender';
    import common from '../common/js/common';
    import headers from './login';
    import tpls from '../common/js/tpls';
    import echarts from 'echarts';
    export default{
        components:{
        },
        data(){
            return{
              tableTrClick:-1,
            	tableList:{},
            	postData:{
                	"item_big_class":"",
	                "item_small_class":"",
	                "item":"",	//170404
	                "plan_class":"",
	                "category":"",
	                "buyer":"",
	                "souring":"",
	                "planner":"",
	                "demand_date":"",
	                "page":1
                },
                tableShow:false,
                tableLoadding:true,
                iptPage:"",
                tableLoadding1:true,
                tableShow1:false,
                noData0:false,
            	noData1:false
            }
        },
        methods:{
            resizeWidth:function(num){
            	var fontRem = common.rem().match(/^\d+(?:\.\d{0,4})?/);
                this.$refs.kk.style.width = 9.67*fontRem*num + "px";
            },
            setPostData:function(){
            	this.postData={
                	"item_big_class":$(".select").find("input[name='kucundalei']").attr("data"),
	                "item_small_class":$(".select").find("input[name='kucunxiaolei']").attr("data"),
	                "item":$(".select").find("input[name='wuliaobianhao']").attr("data"),
	                "plan_class":$(".select").find("input[name='jihualeibie']").attr("data"),
	                "category":$(".select").find("input[name='zhinengfenlei']").attr("data"),
	                "buyer":$(".select").find("input[name='caigouyuan']").attr("data"),
	                "souring":$(".select").find("input[name='sourcing']").attr("data"),
	                "planner":$(".select").find("input[name='jihuayuan']").val(),
	                "demand_date":$(".select").find("input[name='shijian']").val(),
	                "page":1
                }
            	this.basisMap0(1);
            	//this.basisMap1();
            },
            basisMap0:function(page,oldPage){
            	var dataThis = this;
            	if(page != oldPage){
            		dataThis.tableLoadding = true;
            		dataThis.tableShow = false;
            		if(typeof page !="boolean"){
            			dataThis.postData.page = page;
            		}
	            	common.getData(0,common.url_constitute.basisMap0,"post",dataThis.postData,function(data){
		                dataThis.tableLoadding = false;
		                if(data.data.code==1024){
		                	if(data.data.result.items.length<1){
		                		dataThis.tableShow = false;
		                		dataThis.noData0 = true;
		                	}else{
			                	dataThis.tableShow = true;
			                	dataThis.noData0 = false;

			                	dataThis.tableList = data.data.result;
			                }
		                }
		            });
		        }
            },
            basisMap1:function(items,itemsName){
            	var dataThis = this;
            	if(items){
            		dataThis.postData.item = items;
            	}else{
            		dataThis.postData.item = $(".select").find("input[name='wuliaobianhao']").attr("data");
            	}
            	dataThis.tableLoadding1 = true;
            	dataThis.tableShow1 = false;
            	$(".title.hide").removeClass("hide");
				$(".frame.hide").removeClass("hide");
            	common.getData(1,common.url_constitute.basisMap1,"post",dataThis.postData,function(data){
	                dataThis.tableLoadding1 = false;
	                if(data.data.code==1024){
	                	if(data.data.result.length<1){
	                		dataThis.tableShow1 = false;
	                		dataThis.noData1 = true;
	                	}else{
		                	dataThis.tableShow1 = true;
		                	dataThis.noData1 = false;
		                	if(typeof itemsName == "undefined"){
		                		itemsName = "所有物料"
		                	}
							$(".mapTitle").text("物料："+itemsName);

		                	//dataThis.tableList = data.data.result;
		                	/*echarts 图形绘画*/


		                	var xAxisData = xAxisDataFunction(data.data.result.TRANSACTION_DATE);			//表头和时间
		                	var TRANSACTION_DATE = xAxisDataFunction1(data.data.result.TRANSACTION_DATE);	//表头和时间未处理
		                	var REALITY_ARRIVAL = data.data.result.REALITY_ARRIVAL;		//实际到货量
		                	var REALITY_DEMAND = data.data.result.REALITY_DEMAND;		//实际需求量
		                	var FREEZE_DEMAND = data.data.result.FREEZE_DEMAND;			//销售订单需求量
		                	var PREDICT_QUANTITY = data.data.result.PREDICT_QUANTITY;	//预测需求量
		                	var SAFE_QUANTITY = data.data.result.SAFE_QUANTITY;			//安全库存量
		                	var UNSETTLE_ORDER = data.data.result.UNSETTLE_ORDER;		//未结订单预计到货
		                	var SUGGEST_ORDER = data.data.result.SUGGEST_ORDER;			//建议订单预计到货
		                	var INVENTORY_USE = data.data.result.INVENTORY_USE;			//库存可用量
		                	var INVENTORY_VALUE = data.data.result.INVENTORY_VALUE;		//库存价值
		                	var THIRTY_DAY = data.data.result.THIRTY_DAY;				//30天年化周转率
		                	var THIS_YEAR = data.data.result.THIS_YEAR;					//本年周转率
		                	var FULLFILLMENT = data.data.result.FULLFILLMENT;			//需求满足率
		                	var OPO = data.data.result.OPO;								//预计opo未提数量
		                	/*重组数据数组*/
		                	var newDataArr = [
		                		TRANSACTION_DATE,	//表头和时间
			                	REALITY_ARRIVAL,	//实际到货量
			                	REALITY_DEMAND,		//实际需求量
			                	FREEZE_DEMAND,		//销售订单需求量
			                	PREDICT_QUANTITY,	//预测需求量
			                	SAFE_QUANTITY,		//安全库存量
			                	UNSETTLE_ORDER,		//未结订单预计到货
			                	SUGGEST_ORDER,		//建议订单预计到货
			                	INVENTORY_USE,		//库存可用量
			                	INVENTORY_VALUE,	//库存价值
			                	THIRTY_DAY,			//30天年化周转率
			                	THIS_YEAR,			//本年周转率
			                	FULLFILLMENT,		//需求满足率
			                	OPO					//预计opo未提数量
		                	];

		                	var htmlData = "<ul class='ul-table'>"+
												"<li class='clearfix'>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
												"</li>"+
												"<li class='clearfix'>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
												"</li>"+
												"<li class='clearfix'>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
												"</li>"+
												"<li class='clearfix'>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
												"</li>"+
												"<li class='clearfix'>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
												"</li>"+
												"<li class='clearfix'>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
												"</li>"+
												"<li class='clearfix'>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
												"</li>"+
												"<li class='clearfix'>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
												"</li>"+
												"<li class='clearfix'>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
												"</li>"+
												"<li class='clearfix'>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
												"</li>"+
												"<li class='clearfix'>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
												"</li>"+
												"<li class='clearfix'>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
												"</li>"+
												"<li class='clearfix'>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
												"</li>"+
												"<li class='clearfix'>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
													"<div class='td'></div>"+
												"</li>"+
											"</ul>"
							$(".tableBox").html("");
							/*日期格式处理函数*/
							function xAxisDataFunction(date){
								var newDate = [];
								for(var d=0;d<date.length;d++){
									if(date[d].split("(")[0]==data.data.weekday){
										newDate.push({
											value:date[d].split("-")[0] + "/" + parseInt(date[d].split("-")[1])+ "/" + parseInt(date[d].split("-")[2]),
											textStyle:{
												color:"red"
											}
										})
									}else{
										newDate.push(date[d].split("-")[0] + "/" + parseInt(date[d].split("-")[1])+ "/" + parseInt(date[d].split("-")[2]));
									}
								}
								return newDate;
							}
							/*日期格式处理函数2*/
							function xAxisDataFunction1(date){
								var newDate = [];
								for(var d=0;d<date.length;d++){
									newDate.push(date[d].split("-")[0] + "年" + parseInt(date[d].split("-")[1]) + "月" + date[d].split("-")[2].split("(")[0] + "日 (" + date[d].split("-")[2].split("(")[1]);
								}
								return newDate;
							}
		                	for(var a=0;a<xAxisData.length/7;a++){
		                		$(".tableBox").append(htmlData)
		                		for(var b=0;b<newDataArr.length;b++){
		                			for(var c=0;c<7;c++){
		                				$(".ul-table").eq(a).children("li").eq(b).children(".td").eq(c).text(common.tofixeds(newDataArr[b][c+a*7]));
		                				if(newDataArr[b][c+a*7]==null){

		                				}else{
		                					if(b<4&&b>0){
			                					$(".ul-table").eq(a).children("li").eq(b).children(".td").eq(c).addClass("fec9c9");
			                				}else if(b>3&&b<8){
			                					$(".ul-table").eq(a).children("li").eq(b).children(".td").eq(c).addClass("c3e8f1");
			                				}else if(b>7&&b<13){
			                					$(".ul-table").eq(a).children("li").eq(b).children(".td").eq(c).addClass("fcd5b4");
			                				}
		                				}
		                			}
		                		}
		                	}
		                	dataThis.$nextTick(() => {  dataThis.resizeWidth(xAxisData.length/7); });
		                	if(xAxisData.length/7<3){
		                		$(".tscroll").removeClass("br");
		                	}else{
		                		$(".tscroll").addClass("br");
		                	}
		                	tpls.basisMap0.xAxis[0].data = xAxisData;
		                	tpls.basisMap0.series[0].data = INVENTORY_USE;			//库存可用量
		                	tpls.basisMap0.series[1].data = REALITY_ARRIVAL;		//实际到货量
		                	tpls.basisMap0.series[2].data = REALITY_DEMAND;			//实际需求量
		                	tpls.basisMap0.series[3].data = FREEZE_DEMAND;			//销售订单需求量
		                	tpls.basisMap0.series[4].data = PREDICT_QUANTITY;		//预测需求量
		                	tpls.basisMap0.series[5].data = SAFE_QUANTITY;			//安全库存量
		                	tpls.basisMap0.series[6].data = UNSETTLE_ORDER;			//未结订单预计到货
		                	tpls.basisMap0.series[7].data = SUGGEST_ORDER;			//建议订单预计到货
		                	tpls.basisMap0.series[8].data = INVENTORY_VALUE;		//库存价值
		                	tpls.basisMap0.series[9].data = THIRTY_DAY;				//30天年化周转率
		                	tpls.basisMap0.series[10].data = THIS_YEAR;				//本年周转率
		                	tpls.basisMap0.series[11].data = FULLFILLMENT;			//需求满足率
		                	tpls.basisMap0.series[12].data = OPO;					//预计OPO未提数量

		                	var basisMap0 = document.getElementById("basisMap0");
		                    basisMap0 = echarts.init(basisMap0);
		                    basisMap0.setOption(tpls.basisMap0,true);
		                }
	                }
	            });
            },
            basisMap1_TR:function(index,time,segment){
              if(this.tableTrClick!=index){
                this.tableTrClick=index;
                this.basisMap1(time,segment);
              }else{
                this.tableTrClick=!this.tableTrClick;
              }
            },
        },
        created(){

        },
        mounted(){
            common.selectFunction();
            common.setSelect();
            common.selectDate("#endDate");
            this.basisMap0(1);
            //this.basisMap1();
        }
    }

</script>

<style>
</style>
